<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>device setting</title>
  <link rel="shortcut icon" href="images/icon-48x48-nevegy.png" />
  <link rel="stylesheet" href="vendor/bootstrap.min.css">
  <link rel="stylesheet" href="vendor/animate.min.css">
  <link rel="stylesheet" href="css/managedevice.css?202408121628">
</head>

<body>
<div class="body">
  <h1 class="header">
    <img src="images/gear.svg" alt="">
    <span st="Device setting">Device settings</span>
  </h1>
  <div class="form" id="type2">

    <label for="deviceName" st="Device Name:">Device Name:</label>
    <input type="text" name="deviceName" id="deviceName" class="form-control">

    <label for="deviceMac" st="Device mac:">Device mac:</label>
    <input type="text" name="deviceMac" id="deviceMac" class="form-control">

    <label for="areaLocation" st="Device subtype:">Device subtype:</label>
    <select id="deviceSubType" class="form-control" name="deviceSubType">
      <option value="" st="-- Select device subtype --">-- Select device subtype --</option>
      <option value="1">nevegy 100</option>
      <option value="2">nevegy 200</option>
      <option value="3">nevegy X</option>
      <option value="4">nevegy AQS</option>
      <option value="5">nevegy AQS Cloud</option>
      <option value="6">nevegy AQS Ceiling</option>
      <option value="200">nevegy FCU</option>
      <option value="201">nevegy VRV</option>
      <option value="202">nevegy PLC</option>
      <option value="300">nevegy LAS 1</option>
      <option value="301">nevegy LAS 2</option>
      <option value="302">nevegy LAS 8</option>
    </select>

    <label for="" st="Change password:">Change password:</label>
    <div class="item margin-left-0 pwd">
      <label for="passDevice" st="Current password:">Current password:</label>
      <input type="password" class="form-control" id="passDevice" name="passDevice" placeholder="Current password">
    </div>

    <div class="item pwd">
      <label for="passDeviceNew" st="New password:">New password:</label>
      <input type="password" class="form-control" id="passDeviceNew" name="passDeviceNew" placeholder="New password">
    </div>

    <label for="deviceStatus" st="Status:">Status:</label>
    <select class="form-select" id="deviceStatus" name="deviceStatus">
      <option value="" st="-- Select a status for this device --">-- Select a status for this device --</option>
      <option value="0" st="Stock">Stock</option>
      <option value="1" st="In operation">In operation</option>
      <option value="2" st="Down">Down</option>
      <option value="3" st="Decomissioned">Decomissioned</option>
    </select>

    <div>
      <label for="locationDevice" st="Location device belongs to:">Location device belongs to:</label>
      <select id="locationDevice" class="form-select" name="locationDevice" disabled>
        <option></option>
      </select>

      <label for="areaDevice" st="Area:">Area:</label>
      <select id="areaDevice" class="form-select" name="areaDevice"></select>
    </div>


    <div class="week">
      <label for="deviceDays" st="Select the days of operation:">Select the days of operation:</label>
      <div class="btn-group" role="group">
        <input type="checkbox" class="btn-check" id="deviceDays7" name="deviceDays" value="7">
        <label class="btn btn-outline-primary" for="deviceDays7" st="Sun">Sun</label>

        <input type="checkbox" class="btn-check" id="deviceDays1" name="deviceDays" value="1">
        <label class="btn btn-outline-primary" for="deviceDays1" st="Mon">Mon</label>

        <input type="checkbox" class="btn-check" id="deviceDays2" name="deviceDays" value="2">
        <label class="btn btn-outline-primary" for="deviceDays2" st="Tue">Tue</label>

        <input type="checkbox" class="btn-check" id="deviceDays3" name="deviceDays" value="3">
        <label class="btn btn-outline-primary" for="deviceDays3" st="Wed">Wed</label>

        <input type="checkbox" class="btn-check" id="deviceDays4" name="deviceDays" value="4">
        <label class="btn btn-outline-primary" for="deviceDays4" st="Thu">Thu</label>

        <input type="checkbox" class="btn-check" id="deviceDays5" name="deviceDays" value="5">
        <label class="btn btn-outline-primary" for="deviceDays5" st="Fri">Fri</label>

        <input type="checkbox" class="btn-check" id="deviceDays6" name="deviceDays" value="67">
        <label class="btn btn-outline-primary" for="deviceDays6" st="Sat">Sat</label>
      </div>
    </div>

    <div class="port1">
      <div class="port-title">
        <h3><span st="Port name:">Port name:</span> Port 1</h3>
        <div class="form-check form-switch none">
          <input class="form-check-input" type="checkbox" id="flexSwitchCheckOne">
          <label class="form-check-label" for="flexSwitchCheckOne" st="Active">Active</label>
        </div>
        <div class="red" st="*Remember to fill timer 1 before timer 2 or 3">*Remember to fill timer 1 before timer 2 or 3</div>
      </div>

      <div class="time port-width">
        <label for="port1Name" st="Port name:">Port name:</label>
        <input type="text" class="form-control" id="port1Name" name="port1Name" placeholder="Enter port 1 name">
      </div>

      <div class="time">
        <label for="switchModeP1T1" st="Time1:">Time1:</label>
        <select id="switchModeP1T1" name="switchModeP1T1" class="form-select">
          <option value="0" st="OFF">OFF</option>
          <option value="1" st="ON">ON</option>
          <option value="2" st="Switch">Switch</option>
          <option value="3" st="Sensor">Sensor</option>
          <option value="4" selected st="Disabled">Disabled</option>
        </select>

        <label for="port1Timer1Start" st="From:">From:</label>
        <input type="time" class="form-control" id="port1Timer1Start" name="port1Timer1Start" value="00:00">

        <label for="port1Timer1End" st="To:">To:</label>
        <input type="time" class="form-control" id="port1Timer1End" name="port1Timer1End" value="00:00">
      </div>

      <div class="time">
        <label for="switchModeP1T2" st="Time2:">Time2:</label>
        <select id="switchModeP1T2" name="switchModeP1T2" class="form-select">
          <option value="0" st="OFF">OFF</option>
          <option value="1" st="ON">ON</option>
          <option value="2" st="Switch">Switch</option>
          <option value="3" st="Sensor">Sensor</option>
          <option value="4" selected st="Disabled">Disabled</option>
        </select>

        <label for="port1Timer2Start" st="From:">From:</label>
        <input type="time" class="form-control" id="port1Timer2Start" name="port1Timer2Start" value="00:00">

        <label for="port1Timer2End" st="To:">To:</label>
        <input type="time" class="form-control" id="port1Timer2End" name="port1Timer2End" value="00:00">
      </div>

      <div class="time">
        <label for="switchModeP1T3" st="Time3:">Time3:</label>
        <select id="switchModeP1T3" name="switchModeP1T3" class="form-select">
          <option value="0" st="OFF">OFF</option>
          <option value="1" st="ON">ON</option>
          <option value="2" st="Switch">Switch</option>
          <option value="3" st="Sensor">Sensor</option>
          <option value="4" selected st="Disabled">Disabled</option>
        </select>

        <label for="port1Timer3Start" st="From:">From:</label>
        <input type="time" class="form-control" id="port1Timer3Start" name="port1Timer3Start" value="00:00">

        <label for="port1Timer3End" st="To:">To:</label>
        <input type="time" class="form-control" id="port1Timer3End" name="port1Timer3End" value="00:00">
      </div>
    </div>

    <div class="port2">
      <div class="port-title">
        <h3><span st="Port name:">Port name:</span> Port 2</h3>
        <div class="form-check form-switch none">
          <input class="form-check-input" type="checkbox" id="flexSwitchCheckTwo" checked>
          <label class="form-check-label" for="flexSwitchCheckTwo" st="Active">Active</label>
        </div>
        <div class="red">Port 2.</div>
      </div>

      <div class="time port-width">
        <label for="port2Name" st="Port name:">Port name:</label>
        <input type="text" class="form-control" id="port2Name" name="port2Name" placeholder="Enter port 2 name">
      </div>

      <div class="time">
        <label for="switchModeP2T1" st="Time1:">Time1:</label>
        <select id="switchModeP2T1" name="switchModeP2T1" class="form-select">
          <option value="0" st="OFF">OFF</option>
          <option value="1" st="ON">ON</option>
          <option value="2" st="Switch only">Switch only</option>
          <option value="3" st="Sensor only">Sensor only</option>
          <option value="4" st="Switch & Sensor">Switch & Sensor</option>
          <option value="5" st="Disabled">Disabled</option>
        </select>

        <label for="port2Timer1Start" st="From:">From:</label>
        <input type="time" class="form-control" id="port2Timer1Start" name="port2Timer1Start" value="00:00">

        <label for="port2Timer1End" st="To:">To:</label>
        <input type="time" class="form-control" id="port2Timer1End" name="port2Timer1End" value="00:00">
      </div>

      <div class="time">
        <label for="switchModeP2T2" st="Time2:">Time2:</label>
        <select id="switchModeP2T2" name="switchModeP2T2" class="form-select">
          <option value="0" st="OFF">OFF</option>
          <option value="1" st="ON">ON</option>
          <option value="2" st="Switch only">Switch only</option>
          <option value="3" st="Sensor only">Sensor only</option>
          <option value="4" st="Switch & Sensor">Switch & Sensor</option>
          <option value="5" st="Disabled">Disabled</option>
        </select>

        <label for="port2Timer2Start" st="From:">From:</label>
        <input type="time" class="form-control" id="port2Timer2Start" name="port2Timer2Start" value="00:00">

        <label for="port2Timer2End" st="To:">To:</label>
        <input type="time" class="form-control" id="port2Timer2End" name="port2Timer2End" value="00:00">
      </div>

      <div class="time">
        <label for="switchModeP2T3" st="Time3:">Time3:</label>
        <select id="switchModeP2T3" name="switchModeP2T3" class="form-select">
          <option value="0" st="OFF">OFF</option>
          <option value="1" st="ON">ON</option>
          <option value="2" st="Switch only">Switch only</option>
          <option value="3" st="Sensor only">Sensor only</option>
          <option value="4" st="Switch & Sensor">Switch & Sensor</option>
          <option value="5" st="Disabled">Disabled</option>
        </select>

        <label for="port2Timer3Start" st="From:">From:</label>
        <input type="time" class="form-control" id="port2Timer3Start" name="port2Timer3Start" value="00:00">

        <label for="port2Timer3End" st="To:">To:</label>
        <input type="time" class="form-control" id="port2Timer3End" name="port2Timer3End" value="00:00">
      </div>
    </div>

    <div class="item margin-left-0 cooldown">
      <label for="cooldown" st="Cooldown:">Cooldown:</label>
      <input type="number" class="form-control" id="cooldown" name="cooldown" placeholder="Cooldown" min="0" max="60" value="0">
    </div>

    <div class="item radar">
      <label for="radar" st="Radar Sensor:">Radar Sensor:</label>
      <select class="form-select" id="radar" name="radar">
        <option value="" st="-- Switch mode --">-- Switch mode --</option>
        <option value="0" st="Disabled" selected>Disabled</option> <!-- 否 -->
        <option value="1" st="Enabled">Enabled</option> <!-- 是 -->
      </select>
    </div>

    <div class="item full-width margin-left-0 backautobox">
      <label for="" st="BackAuto:">BackAuto:</label>
      <div>
        <p class="backauto">
          <label for="">
            <input type="time" class="form-control" value="00:00">
            <button type="button" class="btn btn-danger backatuoRemove">-</button>
          </label>

        </p>

        <button type="button" class="btn btn-success" id="addBackAuto">+ <span st="Add">Add</span></button>
      </div>
    </div>

    <div class="item margin-left-0 Temperature">
      <label for="Temperature" st="Temperature:">Temperature:</label>
      <input type="number" class="form-control" id="temperature" name="temperature" placeholder="Temperature"
             min="-15" max="15">
    </div>

    <div class="item humidity">
      <label for="humidity" st="humidity:">humidity:</label>
      <input type="number" class="form-control" id="humidity" name="humidity" placeholder="humidity" min="-15"
             max="15">
    </div>

    <div class="item screensaver">
      <label for="screensaver" st="screensaver:">screensaver:</label>
      <input type="number" class="form-control" id="screensaver" name="screensaver" placeholder="screensaver"
             min="0" max="60">
    </div>

    <div class="submit">
      <button id="btn_create" type="button" class="btn btn-outline-primary" st="Save Changes">Save Changes</button>
    </div>
  </div>


  <h1 class="footer"><b>Nevegy</b> &copy; <span id="year">2024</span> </h1>
</div>

<dialog id="dialog" class="animate__animated">
  <div class="dialog-content">
    <p>Submitted successfully!</p>
  </div>
</dialog>

<script src="vendor/jquery-3.7.1.min.js"></script>
<script src="vendor/axios.min.js"></script>
<script src="js/lan.js?202408231441"></script>
<script src="js/comm.js?202408121628"></script>
<script src="js/devicesetting.js?202510131448"></script>
</body>

</html>
